<template>
    <!-- 资金记录 -->
    <div class="fundingRecords">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list class="fundingRecords-list" v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" :immediate-check="false">
                <div class="list-box" v-for="item in listData" :key="item.id">
                    <header class="flex items-center py-10">
                        <figure class="mr-10"><img class="header-img" :src="`${HOST_URL}/symbol/${'usdt'}.png`" @error="handleImageError" /></figure>
                        <p class="font-26 font-600">USDT</p>
                    </header>
                    <main>
                        <div class="flex justify-between py-10 font-28" v-for="(value,key) in listTitle" :key="key">
                            <p>{{ value }}</p>
                            <p :class="key === 'num' ? item[key] > 0 ? 'green':'red':''">{{ item[key] }}</p>
                        </div>
                    </main>
                </div>
            </van-list>
        </van-pull-refresh>
    </div>
</template>

<script>
import { HOST_URL } from '@/config';
import defaultImage from '@/assets/loading-default.png';
import { List, PullRefresh } from 'vant';
export default {
    components: {
        [List.name]: List,
        [PullRefresh.name]: PullRefresh,
    },
    data() {
        return {
            HOST_URL,
            defaultImage,
            loading: false,
            finished:true,
            refreshing:false,
            listData: [
                {
                    id: 0,
                    type: '划转',
                    num: 1250,
                    before: 0,
                    after: 100,
                    time: '2024/11/19 23:12:51',
                },
                {
                    id: 1,
                    type: '期权交易结算',
                    num: -54,
                    before: 254,
                    after: 339,
                    time: '2024/11/17 23:12:51',
                },
            ],
            listTitle:{
                type:'交易类型',
                num:'交易数量',
                before:'帐变前余额',
                after:'帐变后余额',
                time:'交易日期',
            }
        }
    },
    methods: {
        handleImageError(event) {
            event.target.src = this.defaultImage;
        },
        // 上拉加载
        onLoad() {
            console.log(11);
            
        },
        // 下拉刷新
        onRefresh() {
            console.log(22);
            this.refreshing = false;
        },
    },
}
</script>

<style lang="scss" scoped>
.fundingRecords {
    padding: 20px;
    .list-box {
        padding-bottom: 40px;
        border-bottom: 1px solid #ccc;
        box-sizing: border-box;
        .header-img {
            width: 64px;
            height: 64px;
        }
    }
    .red{
        color: #f56c6c;
    }
    .green{
        color: #67c23a;
    }
}
</style>